<template>
  <div class="contentId">
    <div class="left">
      <div class="tip">身份证正反照<span style="color:red;">*</span></div>
      <div class="idcards">
        <div class="list1">
          <div class="idcard1">
            <img :src="idImg1" v-if="idImg1" />
          </div>
          <el-upload
            class="avatar-uploader"
            action="https://api.xstarlife.com/systemapp/upload/singleFileUpload"
            :headers="{ uploadScene: 'avatar' }"
            :show-file-list="false"
            :on-success="handleAvatarSuccessId1"
            :before-upload="beforeAvatarUpload"
          >
            <el-button>上传正面</el-button>
          </el-upload>
        </div>
        <div class="list2">
          <div class="idcard2">
            <img :src="idImg2" v-if="idImg2" />
          </div>
          <el-upload
            class="avatar-uploader"
            action="https://api.xstarlife.com/systemapp/upload/singleFileUpload"
            :headers="{ uploadScene: 'avatar' }"
            :show-file-list="false"
            :on-success="handleAvatarSuccessId2"
            :before-upload="beforeAvatarUpload"
          >
            <el-button>上传反面</el-button>
          </el-upload>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="tip">提现卡号信息</div>
      <el-form
        :model="ruleform"
        :rules="rules"
        ref="releform"
        label-width="130px"
        label-position="left"
        class="forms"
      >
        <el-form-item
          label="持卡人姓名："
          class="leftone"
          prop="cardHolderName"
        >
          <el-input
            placeholder="输入持卡人姓名"
            v-model="ruleform.cardHolderName"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="银行预留手机号："
          class="margin"
          prop="bankReservePhone"
        >
          <el-input
            placeholder="输入银行预留手机号"
            v-model="ruleform.bankReservePhone"
            maxlength="11"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属银行：" class="leftone" prop="bankCode">
          <el-select
            v-model="ruleform.bankCode"
            filterable
            placeholder="请选择"
            @change="changeBank()"
          >
            <el-option
              v-for="item in bankOptions"
              :key="item.bankCode"
              :label="item.bankName"
              :value="item.bankCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支行名称：" class="margin" prop="openBankAcctName">
          <el-input
            placeholder="输入支行名称"
            v-model="ruleform.openBankAcctName"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证号码：" class="leftone" prop="staffCard">
          <el-input
            placeholder="输入身份证号码"
            v-model="ruleform.staffCard"
            maxlength="18"
          ></el-input>
        </el-form-item>
        <el-form-item label="银行卡号：" class="margin" prop="bankCardNo">
          <el-input
            placeholder="输入卡号，请确保卡号正确无误"
            v-model="ruleform.bankCardNo"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    staffBasicVo1: {
      required: false
    },
    staffAccountVo1: {
      required: false
    }
  },
  data() {
    return {
      idImg1: "",
      idImg2: "",
      ruleform: {
        cardHolderName: "",
        bankReservePhone: "",
        bankCode: "",
        bankName: "",
        openBankAcctName: "",
        staffCard: "", // 身份证号
        bankCardNo: "" // 银行卡号
      },
      bankOptions: [],
      subBankOptions: [],
      currentsubbankOptions: [],
      rules: {
        cardHolderName: [
          { required: true, message: "请输入持卡人姓名", trigger: "blur" }
        ],
        bankReservePhone: [
          { required: true, message: "请输入银行预留手机号", trigger: "blur" }
        ],
        bankCode: [
          { required: true, message: "请输入所属银行", trigger: "change" }
        ],
        openBankAcctName: [
          { required: true, message: "请输入所属支行", trigger: "blur" }
        ],
        staffCard: [
          { required: true, message: "请输入身份证号码", trigger: "blur" }
        ],
        bankCardNo: [
          { required: true, message: "请输入银行卡号", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    beforeAvatarUpload() {},
    handleAvatarSuccessId1({ data }) {
      this.idImg1 = data;
    },
    handleAvatarSuccessId2({ data }) {
      this.idImg2 = data;
    },
    // 银行枚举
    async fetchBank() {
      await this.$http({
        url: "/staffadmin/homeService/staffManager/fetchBank",
        method: "get"
      }).then(data => {
        this.bankOptions = data;
      });
    },
    changeBank() {
      // this.ruleform.openBankAcctCode = "";
      this.ruleform.openBankAcctName = "";
    },
    sendMsg() {
      let bankName = "";
      let openBankAcctName = "";
      if (this.ruleform.bankCode) {
        bankName = this.bankOptions.find(
          item => item.bankCode === this.ruleform.bankCode
        ).bankName;
      }
      this.$emit("save", {
        staffCardPos: this.idImg1, // 身份证正面
        staffCardBack: this.idImg2, // 身份证反面
        cardHolderName: this.ruleform.cardHolderName,
        bankReservePhone: this.ruleform.bankReservePhone,
        bankCode: this.ruleform.bankCode,
        bankName: bankName,
        openBankAcctName: this.ruleform.openBankAcctName,
        staffCard: this.ruleform.staffCard,
        bankCardNo: this.ruleform.bankCardNo
      });
    },
    initData() {
      // 编辑回显页面
      if (this.$route.query.staffCode) {
        // 身份证
        this.idImg1 = this.staffBasicVo1.staffCardPos;
        this.idImg2 = this.staffBasicVo1.staffCardBack;
      }
    },
    async initData1() {
      if (this.$route.query.staffCode) {
        // 银行信息
        this.ruleform.cardHolderName = this.staffAccountVo1.cardHolderName;
        this.ruleform.bankReservePhone = this.staffAccountVo1.bankReservePhone;
        this.ruleform.bankCode = this.staffAccountVo1.bankCode;
        this.ruleform.bankName = this.staffAccountVo1.bankName;
        this.ruleform.openBankAcctName = this.staffAccountVo1.openBankAcctName;
        this.ruleform.staffCard = this.staffAccountVo1.staffCard;
        this.ruleform.bankCardNo = this.staffAccountVo1.bankCardNo;
      }
    }
  },
  mounted() {
    this.fetchBank();
  },
  watch: {
    idImg1() {
      this.sendMsg();
    },
    idImg2() {
      this.sendMsg();
    },
    ruleform: {
      handler() {
        this.sendMsg();
      },
      deep: true
    },
    staffBasicVo1(newvalue) {
      if (newvalue) {
        this.initData();
      }
    },
    staffAccountVo1(newvalue) {
      if (newvalue) {
        this.initData1();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.contentId {
  background-color: #fff;
  display: flex;
  .left {
    border-right: 10px solid #ebeef1;
    padding-bottom: 20px;
    .tip {
      font-size: 18px;
      font-weight: 900;
      padding-left: 20px;
      height: 60px;
      line-height: 60px;
    }
    .idcards {
      display: flex;
      padding: 0 20px;
      .el-button {
        width: 120px;
        height: 30px;
        line-height: 30px;
        padding: 0;
        margin-top: 10px;
        margin-left: 50%;
        margin-bottom: 10px;
        transform: translateX(-50%);
      }
      .idcard1,
      .idcard2 {
        width: 150px;
        height: 100px;
        border: 7px solid #cccccc;
        border-radius: 5px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .list2 {
        margin-left: 15px;
        text-align: center;
      }
      .list1 {
        text-align: center;
      }
    }
  }
  /deep/ .right {
    flex: 1;
    .tip {
      font-size: 18px;
      font-weight: 900;
      padding-left: 20px;
      height: 60px;
      line-height: 60px;
    }
    .forms {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      padding: 0 20px;
      .el-form-item {
        width: 286px;
        margin-bottom: 15px;
        .el-form-item__label {
          padding-right: 0px;
        }
        .el-form-item__content {
          width: 174px;
          .el-input__inner {
            height: 30px;
            line-height: 30px;
          }
        }
      }
      .leftone {
        .el-form-item__label {
          width: 100px !important;
        }
        .el-form-item__content {
          margin-left: 100px !important;
        }
      }
    }
  }
}
</style>
